<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p7_表单练习</title>
</head>
<body>
<!--from表示整个表单 action="#" 表示将收集到的数据提交到当前页
注意：每个控件必须有name值，
input的type值：
text 文本 password 密码 radio 单选 check box 多选  submit 提交 reset 重置
button 普通按钮 date 日期 color 颜色 file 文件 range 范围

name 用来设置选框的名字 ，没有此值该控件无法提交值。
value ： 设置输入框的默认值 ，按钮上的显示的文字 ，单选/多选 选中的值

-->
<form action="#">

    姓名1:<input type="text" name="uname" value="Tom"><br>
    <!--单值属性 read only 只读（只能看不能改） disabled 禁用（值不能提交 ）-->
    姓名2:<input type="text" name="uname" value="Tom" readonly><br>
    姓名3:<input type="text" name="uname" value="Tom" disabled><br>
    姓名4:<input type="text" name="uname" placeholder="请输入用户名"><br>
    密码:<input type="password" name="upwd" maxlength="6" placeholder="6位密码"><br>
    性别:
    <input type="radio" name="gender" value="1"> 男
    <input type="radio" name="gender" value="0" checked>女 <br>
    爱好:
    <input type="checkbox" name="like" value="cy">抽烟
    <input type="checkbox" name="like" value="hj">喝酒
    <input type="checkbox" name="like" value="tt">烫头
    <input type="checkbox" name="like" value="java" checked>学Java <br>
    生日:<input type="date" name="birthday"><br>
    颜色:<input type="color" name="lc"><br>
    范围:<input type="range" name="sf"><br>
    文件:<input type="file" name="uf">
    <br>
    喜欢的城市：
    <!--    下拉选框 <K,V>=> <name:city ,value= bj >
    checked   单选默认被选中
    selected  多选默认被选中-->
    <select name="city">
        <option value="bj">北京</option>
        <option value="sz">深圳</option>
        <option value="cq">重庆</option>
        <option value="eb" selected>哈尔滨</option>
    </select>
    <br>
    <!--    效果： 点击文字就可以选中复选框-->
    <input type="checkbox" id="ok">
    <label for="ok">我同意以上协议</label>
    <br>
    <!--    效果： 点击文字就可以让输入框获得焦点（输入光标I）-->
    <label for="ok2">关联文字</label>
    <input type="text" id="ok2">
    <br>
<!--    多行文本域-->
    留言板:
    <textarea name="content" cols="30" rows="3" style="resize: none" >请发言~</textarea>
    <br>
    <br>
    <br>
    <br>
    <input type="submit" value="我是提交">
    <input type="reset" value="我是重置">
    <input type="button" value="暂时不用">
    <button>我是按钮</button>
</form>


</body>
</html>